<template>
  <a-modal :mask-closable="false"  v-model:visible="visible" fullscreen :footer="false">
    <template #title>{{ currentRow.name }} 拍照部位</template>
    <!-- CRUD 组件 -->
    <ma-crud :options="options" :columns="columns" ref="crudRef">
      <!-- 排序列 -->
      <template #sort="{ record }">
        <a-input-number
          :default-value="record.sort"
          mode="button"
          @change="changeSort($event, record.id)"
          :min="0"
          :max="1000"
        />
      </template>
    </ma-crud>
  </a-modal>
</template>
<script setup>
import { ref, reactive } from 'vue'
import lzccVehiclePic from '@/api/lzcc/lzccVehiclePic'
import { Message } from '@arco-design/web-vue'
import tool from '@/utils/tool'
import * as common from '@/utils/common'

const crudRef = ref()
const visible = ref(false)
const currentRow = ref({ id: undefined, name: undefined })

const open = (row) => {
  currentRow.value = row
  crudRef.value.requestData()
  visible.value = true
}

const changeSort = async (value, id) => {
  const response = await lzccVehiclePic.numberOperation({ id, numberName: 'sort', numberValue: value })
  if (response.success) {
    Message.success(response.message)
  }
}

const options = reactive({
  autoRequest: false,
  beforeRequest: (params) => {
    params.vehicle_id = currentRow.value.id
  },
  beforeAdd: (form) => {
    form.vehicle_id = currentRow.value.id
    return true
  },
  id: 'flyos_lzcc_vehicle_pic',
  rowSelection: {
    showCheckedAll: true
  },
  pk: 'id',
  operationColumn: true,
  operationWidth: 160,
  formOption: {
    viewType: 'modal',
    width: 600
  },
  api: lzccVehiclePic.getList,
  add: {
    show: true,
    api: lzccVehiclePic.save,
    auth: ['lzcc:vehiclePic:save']
  },
  edit: {
    show: true,
    api: lzccVehiclePic.update,
    auth: ['lzcc:vehiclePic:update']
  },
  delete: {
    show: true,
    api: lzccVehiclePic.deletes,
    auth: ['lzcc:vehiclePic:delete']
  },
  import: {
    show: true,
    url: 'lzcc/vehiclePic/import',
    templateUrl: 'lzcc/vehiclePic/downloadTemplate',
    auth: ['lzcc:vehiclePic:import']
  },
  export: {
    show: true,
    url: 'lzcc/vehiclePic/export',
    auth: ['lzcc:vehiclePic:export']
  }
})

const columns = reactive([
  {
    title: "ID",
    dataIndex: "id",
    formType: "input",
    addDisplay: false,
    editDisplay: false
  },
  {
    title: "所属车型",
    dataIndex: "vehicle_id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "部位名称",
    dataIndex: "name",
    formType: "input",
    search: true,
    commonRules: [{ required: true, message: '部位名称必填' }],
  },
  {
    title: "示例照片",
    dataIndex: "pic",
    formType: "upload",
    onlyData: true,
    returnType: "url",
    multiple: false,
    chunk: false,
    type: "image",
    commonRules: [{ required: true, message: '示例照片必须上传' }],
  },
  {
    title: "排序",
    dataIndex: "sort",
    formType: "input-number",
    defaultValue: 0,
  },
])

defineExpose({ open })
</script>